<script>
import { ElMessageBox,ElMessage } from 'element-plus';
import shopcar from './shopcar.vue';
import shoporders from './orders.vue';
import axios from "axios";
import {CircleCloseFilled} from "@element-plus/icons-vue";


export default {
  data() {
    return {
       keywords:'',
      pageNum1:0,
      pageSize1:4,
      dialogVisible: false,
      product: [],
      cart: [],
      orders: [],
      drawer: false,
      drawer1: false,
      drawer2: false,
      drawer3: false
    };
  },
  methods: {
    handleClose(done) {
      console.log("进入模态框")
      ElMessageBox.confirm('确认关闭？')
          .then(() => {
            console.log("开启完毕")
            done();
          })
          .catch(() => {});
    },
    closedig() {
      this.dialogVisible = false;
    },
    opendig() {
      console.log(this.dialogVisible)
      this.dialogVisible = true;
    },getallproduct(){
      let  pageNum=this.pageNum1
      let pageSize=this.pageSize1
      this.pageNum1=this.pageNum1+1
     axios.get("/product",{
       params:{
         pageNum,
         pageSize
       }
     }).then(result=>{
       console.log(result.data.data);
      this.product= this.product.concat(result.data.data.items)
      }).catch(error=>{
        ElMessageBox.alert("数据有问题")

      })
    },
    like(){
      let data={
        pageSize:this.pageSize1,
        pageNum:this.pageNum1,
        KeyWords:this.keywords
      }

      axios.get("/product/like", {
        params:data
      }).then(result=>{
console.log(result.data.data.items)
        this.product=result.data.data.items
        ElMessage({
          type:"success",
          message:'主人 查询成功啦'
        })
      }).catch(error=>{
        ElMessage({
          type:"success",
          message:error.message
        })
      })
    }
  },
  components: {
    CircleCloseFilled,
    shopcar: shopcar,
    shoporders: shoporders
  }
,

};




</script>

<template>
    <div class="common-layout" style="max-height: 100vh" >
      <el-container>
        <el-header style="">
          <el-row style="text-align: center">
            <el-col :span="6">
              <el-button   icon="el-icon-edit"  style="width: 100%;background-color: #F3B562"@click="drawer=true">购物车</el-button>
            </el-col>
            <el-col :span="6">
              <el-button icon="el-icon-search" type="success" style="width: 100%;"  @click="drawer1=true">我的订单</el-button>
            </el-col>
            <el-col :span="6">
              <el-button icon="el-icon-search" type="warning" style="width: 100%;" @click="drawer2=true">我的宝贝</el-button>
            </el-col>
            <el-col :span="6">
              <el-button icon="el-icon-search" type="warning" style="width: 100%;"  @click="drawer3=true">发布宝贝</el-button>
            </el-col>
          </el-row>

<el-row>
  <el-col :span="20">
    <el-input v-model="keywords"  placeholder="请输入关键字"></el-input>

  </el-col>
  <el-col :span="4">
    <el-button type="primary" style="width: 100%" native-type="submit" @click="like">
      <el-icon>
        <search/>
      </el-icon>
      搜索</el-button>
  </el-col>
</el-row>





        </el-header>
        <el-main style="overflow-y: auto ;height: 100vh"  v-infinite-scroll="getallproduct" infinite-scroll-immediate="true"  >

            <el-row >
              <!--整个购物车列表分为两排-->

                <el-col :span="12" v-for="item in product" >
                  <el-card style="width:100%" shadow="always"  >
                    <el-row>

                      <!--这里是卡片内容分布-->
                      <el-col :span="12">


                        <el-row>
                          <div class="imgbox">
                            <el-image
                                :src=item.productImg
                                fit="cover"
                                class="image"
                            ></el-image>
                          </div>
                        </el-row>

                      </el-col>
                      <el-col :span="12">
                        <el-row>
                          <el-text type="info" style="font-size: larger;text-align: center ;font-size: 22px;" >
                            {{item.productName}}</el-text>
                        </el-row>
                        <el-row>
                          <el-text type="info" style="font-size: larger">
                            {{item.description}}
                          </el-text>
                        </el-row>
                        <el-row>
                          <el-text type="danger">
                            价格：{{item.price}}
                          </el-text>

                        </el-row>
                        <el-row>
                          <el-text type="danger">
                            库存:{{item.stock}}
                          </el-text>

                        </el-row>
                        <el-row >
                          <el-col :span="12">
                            <el-button style="width: 100%" type="success" @click="opendig">加入购物车</el-button>
                          </el-col>
                          <el-col :span="12">
                            <el-button  style="width: 100%" type="primary">立即购买</el-button>
                          </el-col>
                        </el-row>
                        <el-row>

                        </el-row>


                      </el-col>

                    </el-row>
                  </el-card>
                </el-col>


            </el-row>


        </el-main>
        <el-footer>




        </el-footer>
      </el-container>
    </div>
  <!--添加购物车对话框-->
  <el-dialog
      title="提示"
      v-model="dialogVisible"
      width="30%"
      :before-close="handleClose">
    <el-row>
      <span>购物车列表</span>
    </el-row>

       <span slot="footer" class="dialog-footer">

    <el-button @click="closedig" type="info">取 消</el-button>
    <el-button type="primary" @click="closedig">确 定</el-button>
  </span>
  </el-dialog>
<!--抽屉组-->
  <!--购物车抽屉-->

    <el-drawer v-model="drawer" size="60%" :show-close="false">
    <template #header="{ close, titleId, titleClass }">
      <h2 :id="titleId" :class="titleClass">购物车</h2>
      <el-button type="danger" @click="close">
        <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
        关闭
      </el-button>
    </template>
   购物车

  </el-drawer>
  <!--订单抽屉-->
  <el-drawer v-model="drawer1" title="订单"  size="60%" :with-header="true">
    <span>Hi there!</span>
  </el-drawer>
  <!--我的宝贝抽屉-->
  <el-drawer v-model="drawer2" title="我的宝贝"  size="60%" :with-header="true">
    <span>Hi there!</span>
  </el-drawer>
  <!--发布宝贝抽屉-->
  <el-drawer v-model="drawer3" title="发布宝贝"  size="60%" :with-header="true">
    <span>Hi there!</span>
  </el-drawer>
</template>

<style scoped>
.imgbox{
  width: 50%;
  height: 300px;
  border: hidden;
}
.image{
  width: 100%;
  height: 100%;
}
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}
</style>